<template>
	<div class="luckdraw" :class="this.$store.getters.isIphoneX ? 'pad-top80' : 'pad-top'">
		<back-header title="大转盘抽奖"></back-header>
		<div class="luckdraw-warp">
			<div class="luckdraw_top">
                <img src="../assets/images/luckdraw_top.jpg">
                <button class="btn rule" @click="ruleFn"><img src="../assets/images/luckdraw_rule.png"></button>
                <button class="btn prize" @click="prizeFn"><img src="../assets/images/luckdraw_prize.png"></button>
            </div>
            <div class="luckdraw_bottom">
                <luck-draw 
	                v-on:listentShow="luckdrawshow" 
	                v-on:listentImg="luckdrawimg" 
	                v-on:listenTxt="luckdrawtxt"  
	                :show="resultShow" 
	                :img="resultImg" 
	                :txt="resultTxt"
	                v-on:listentmsgShow="msgShowfn"
	                v-on:listentmsgContent="msgContentfn"
	                v-on:listenNumber="numberFn"
	                :msgshow="msgShow"

                >
                </luck-draw>
                <div class="luckdraw_label">可用次数：<span>{{number}}次</span></div>
            </div>
		</div>
		<div class="luckdraw_result" v-show="resultShow">
	        <div class="luckdraw_result_content">
	            <div class="top">
	                <button class="closebtn" @click="closeResult"><img src="../assets/images/luckdraw_close.png"></button>
	                <div class="title"><img src="../assets/images/luckdraw_result.png"></div>
	                <div class="luckdraw_result_gift">
	                    <img :src="resultImg">
	                    <div class="luckdraw_text">恭喜您获得</div>
	                    <div class="luckdraw_textbig">[{{resultTxt}}]</div>
	                </div>
	                <div class="luckdraw_result_footer"><img src="../assets/images/luckdraw_footer.png"></div>
	            </div>
	            <div class="center">
	                <div class="luckdraw_ewm clearfix">
	                    <img src="../assets/images/codeimg.jpg">
	                    <div class="luckdraw_codetext">
	                        <p>长按二维码</p>
	                        <p>我也去抽奖</p>
	                    </div>
	                </div>
	            </div>
	            <div class="bottom">
	                <p>赶紧把您中奖的好消息告诉给您的好友吧！</p>
	                <div class="goshare"><button @click="goShare()">去分享</button></div>
	            </div>
	        </div>
	    </div>
	    <div class="complaint_alertmsg" v-show="msgShow">
	        <div class="msg">{{msgContent}}</div>
	    </div>
	    <div class="luckdraw_rule" v-show="ruleShow">
	        <div class="luckdraw_rule_content">
	            <button class="closebtn" @click="closeRule"><img src="../assets/images/luckdraw_close.png"></button>
	            <img src="../assets/images/luckdraw_intro.png">
	            <div class="luckdraw_rule_intro">
	                <div>
	                    <h4><span>1</span>活动时间</h4>
	                    <p class="p">2018年2月5日-12月30日</p>
	                    <h4><span>2</span>活动要求</h4>
	                    <p class="p">活动期间所有的注册用户均可参与抽奖。；</p>
	                    <p class="p">A、每天登陆可获得1次抽奖机会</p>
	                    <p class="p">B、每成功邀请一位好友，除获得30金币奖励外，赠送一次抽奖机会；每日最多获得5次；</p>
	                    <p class="p">C、单笔充值50元及以上可以获得1次免费次数，不限次数，“赚”够为止；</p>
	                    <h4><span>3</span>奖品说明</h4>
	                    <p class="p">抽奖获得的红包自动发放到账户，抽奖获得红包24小时内有效；可在我的红包中查看</p>
	                    <h4><span>4</span>实物奖品说明</h4>
	                    <p class="p">实物奖品在活动结束后3个工作日内请联系客服；</p>
	                    <p class="p">抽奖次数仅限当天有效，请尽快使用；</p>
	                    <p class="p">活动最终解释权归梦想抓娃娃所有。</p>
	                    <p style="margin-top:10px;">注：</p>
	                    <p class="notice">抽奖次数仅限当天有效，请尽快使用；活动最终解释权归梦想抓娃娃所有,与苹果公司无关.</p>
	                </div>
	            </div>
	        </div>
	    </div>
	    <div class="luckdraw_prize" v-show="prizeShow">
	        <div class="luckdraw_prize_content">
	            <button class="closebtn" @click="closePrize"><img src="../assets/images/luckdraw_close.png"></button>
	            <img src="../assets/images/luckdraw_mygift.png">
	            <div class="luckdraw_prize_intro">
	                <ul id="drawdetail">
	                	<li v-for="item in prizeList"><span class="con">{{item.draw_title}}</span><span class="time">{{item.create_at}}</span></li>
	                </ul>
	            </div>
	        </div>
	    </div>
	</div>
</template>

<script type="text/javascript">
	import backHeader from '../components/backHeader'
	import luckDraw from '../components/luckdraw'
	export default{
		data(){
			return {
				resultShow:false,
				resultImg:"",
				resultTxt:"",
				msgContent:"",
				msgShow:false,
				ruleShow:false,
				prizeShow:false,
				prizeList:[],
				number:'0',
			}
		},
		components:{backHeader,luckDraw},
		mounted(){
			this.drawdetail();
		},
		methods:{
			luckdrawshow(data){
				this.resultShow = data;
			},
			luckdrawimg(data){
				this.resultImg = data;
			},
			luckdrawtxt(data){
				this.resultTxt = data;
			},
			closeResult(){
				this.resultShow =false;
			},
			goShare(){
				this.$router.push("/Invitation")
			},
			msgShowfn(data){
				this.msgShow = data;
				setTimeout( () => {
					this.msgShow = false;
				},2000)
			},
			msgContentfn(data){
				this.msgContent = data;
			},
			ruleFn(){
				this.ruleShow = true;
			},
			closeRule(){
				this.ruleShow = false;
			},
			prizeFn(){
				this.prizeShow =true;
			},
			closePrize(){
				this.prizeShow =false;
			},
			numberFn(data){
				this.number = data;
			},
			drawdetail(){
				this.$jsonp(`${this.URL_PREFIX}/OpenAPI/v1/Luckdraw/drawdetail`,{token:this.$store.getters.user.token}).then((response) => {
		              console.log(response)
			            this.prizeList=response.data;
		  		})
			},
		}
	}
</script>

<style scoped>
.luckdraw{width:100%;position: relative;}
.luckdraw .luckdraw_top img{width:100%;display: block;}
.luckdraw .luckdraw_top{position: relative;}
.luckdraw .luckdraw_top .btn{position:absolute;top:10px;width:30px;height:30px;background:transparent;border:0;}
.luckdraw .luckdraw_top .rule{left:10px;}
.luckdraw .luckdraw_top .prize{right: 10px;}
.luckdraw_bottom{width:100%;height:auto;padding-bottom:5px;background:url(../assets/images/luckdraw_bottom.jpg) no-repeat center top;background-size:cover;}

.luckdraw .turntable-bg{width:90%;margin:0 auto;padding:10%;padding-bottom:14%;position: relative;background:url(../assets/images/luckdraw_bg.png) no-repeat center top;background-size: cover;}
.luckdraw .turntable-bg .pointer{width:28%;position:absolute;left:36%;top:24%;z-index:8}
.luckdraw .turntable-bg .pointer img{width:100%;display: block;}
.luckdraw .turntable-bg .rotate{width:100%;}
.luckdraw .turntable-bg .rotate img{width:100%;display: block;}
.luckdraw_label{width:190px;height:50px;margin:0 auto;margin-top:5px;line-height:40px;background:url(../assets/images/luckdraw_label.png)  no-repeat center;background-size:100%;text-align: center;color:#640e09;font-size:16px;}
.luckdraw_label span{color:#fe3e00;vertical-align: middle;}
.luckdraw_footer .scrolltext{padding:10px;background:#fff;font-size:14px;}
.luckdraw_footer .scrolltext .notice{display:inline-block;width:30px;height:30px;font-size:14px;background:url(../assets/images/luckdraw_radio.png) no-repeat center;background-size:100%;}
.luckdraw_footer .scrolltext .winBox{width:calc(100% - 40px);width:-webkit-calc(100% - 40px);}


.luckdraw_result{width:100%;height:100%;background:rgba(0,0,0,0.5);position:fixed;top:0;left:0;z-index: 11;}
.luckdraw_result_content{width:240px;height:100%;margin:0 auto;padding-top:90px;}
.luckdraw_result_content .top{position:relative;width:100%;height:301px;background: url(../assets/images/luckdraw_result_bg.png) no-repeat center top;background-size:100%;text-align:center;}
.luckdraw_result_content .top .closebtn{position:absolute;right:-10px;top:-10px;width:30px;height:30px;background:transparent;border:0;}
.luckdraw_result_content .top .closebtn img{width:30px;height:30px;background:transparent;}
.luckdraw_result_content .top .title{padding-top:10%;}
.luckdraw_result_content .top .title img{width:50%;}
.luckdraw_result_content .top .luckdraw_result_gift{padding-top:4%;}
.luckdraw_result_content .top .luckdraw_result_gift img{width:40%;}
.luckdraw_result_content .top .luckdraw_text{color:#fff;font-size:16px;padding:10px 0;}
.luckdraw_result_content .top .luckdraw_textbig{color:#feea10;font-size:28px;}
.luckdraw_result_content .top .luckdraw_result_footer{position: absolute;bottom:10px;left:0;width:100%;}
.luckdraw_result_content .top .luckdraw_result_footer img{width:90%;}
.luckdraw_result_content .center{background:url(../assets/images/luckdraw_bgfooter.png) no-repeat center top;background-size:100%;padding:5px 0;}
.luckdraw_result_content .center .luckdraw_ewm{width:86%;margin:0 auto;text-align:center;}
.luckdraw_result_content .center img{width:35%;vertical-align: middle;}
.luckdraw_result_content .center .luckdraw_codetext{padding:5px 0;margin-left:10px;display:inline-block;vertical-align: middle;}
.luckdraw_result_content .center .luckdraw_codetext p{font-size:16px;color:#333;font-weight:200;line-height:30px;}
.luckdraw_result_content .bottom{text-align:center;}
.luckdraw_result_content .bottom p{color:#fff;padding:10px 0;font-size:12px;}
.luckdraw_result_content .bottom .goshare button{background: url(../assets/images/luckdraw_share.png) no-repeat center top;background-size:100%;border:0;width:158px;height:40px;font-size:16px;line-height:40px;}

.luckdraw_rule{width:100%;height:100%;padding-top:45%;background:rgba(0,0,0,0.5);position: fixed;top:0;left: 0;}
.luckdraw_rule_content{position:relative;width:288px;margin:0 auto;}
.luckdraw_rule_content .closebtn{position: absolute;top:-15%;right:0;z-index:12;width: 30px;height:30px;background: transparent;border:0;}
.luckdraw_rule_content .closebtn img{width:100%;vertical-align: middle;}
.luckdraw_rule_content > img{position:absolute;top:-110px;left:-10%;width:120%;}
.luckdraw_rule_content .luckdraw_rule_intro{width:100%;padding:30px 10px 20px;height:400px;overflow:hidden;background:#fff;border-radius:5px;}
.luckdraw_rule_content .luckdraw_rule_intro > div{height:100%;overflow-y:auto;}
.luckdraw_rule_content .luckdraw_rule_intro h4{color:#333;font-size:16px;font-weight:600;line-height:30px;}
.luckdraw_rule_content .luckdraw_rule_intro h4 span{display: inline-block;width:20px;height:20px;margin-top:-3px;margin-right:10px;border-radius: 50%;background:#ffba00;color:#fff;text-align:center;line-height:20px;font-size:14px;vertical-align: middle;}
.luckdraw_rule_content .luckdraw_rule_intro p{font-size:14px;color:#666;}
.luckdraw_rule_content .luckdraw_rule_intro .p{padding-left:30px;}


.luckdraw_prize{width:100%;height:100%;padding-top:45%;background:rgba(0,0,0,0.5);position: fixed;top:0;left: 0;}
.luckdraw_prize_content{position:relative;width:288px;margin:0 auto;}
.luckdraw_prize_content .closebtn{position: absolute;top:-15%;right:0;z-index:12;width: 30px;height:30px;background: transparent;border:0;}
.luckdraw_prize_content .closebtn img{width:100%;vertical-align: middle;}
.luckdraw_prize_content > img{position:absolute;top:-110px;left:-10%;width:120%;}
.luckdraw_prize_content .luckdraw_prize_intro{width:100%;height:400px;padding:30px 0px 20px;background:#fff;border-radius:5px;}
.luckdraw_prize_content .luckdraw_prize_intro ul{height:100%;overflow-y:auto;}
.luckdraw_prize_content .luckdraw_prize_intro li{width:100%;height:35px;line-height:35px;padding:0 10px;}
.luckdraw_prize_content .luckdraw_prize_intro li:nth-child(even){background:#f2f2f2;}
.luckdraw_prize_content .luckdraw_prize_intro li span{font-size:16px;line-height:35px;}
.luckdraw_prize_content .luckdraw_prize_intro li .time{float: right;}
.luckdraw_prize_content .luckdraw_prize_intro li .con{float:left;}

.complaint_alertmsg{width:120px;background:rgba(0,0,0,0.5);position: fixed;top:40%;left:50%;z-index:12;margin-left:-60px;border-radius:5px;color:#fff;}
.complaint_alertmsg .msg{text-align:center;color:#fff;line-height:50px;font-size:18px;}

</style>